<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.js"></script>
    <script src="../dist/zrender.js"></script>
    <script src="lib/config.js"></script>
</head>
<body>
    <style>
        html, body, #main {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
    <div id="main"></div>
    <script type="text/javascript">
        const zr = zrender.init(document.getElementById('main'), {
            renderer: window.__ZRENDER__DEFAULT__RENDERER__
        });

        var points = [];
        for (var i = 0; i < 10; i++) {
            points.push([Math.random() * 300 + 100, Math.random() * 300 + 100]);
        }

        var splineSmoothedPolyline = new zrender.Polyline({
            x: 100,
            y: 100,
            style : {
                stroke: 'rgba(220, 20, 60, 0.8)',
                lineWidth: 2
            },
            shape: {
                smooth: 'spline',
                points: points
            }
        });

        var polygon = new zrender.Polygon({
            x: 100,
            y: 100,
            style: {
                fill: 'rgba(220, 20, 60, 0.4)'
            },
            shape: {
                points: [[50, 50], [200, 10], [100, 200], [50, 150], [10, 70]],
                smooth: 0.5
            }
        });

        var polygonOutline = new zrender.Polyline({
            x: 100,
            y: 100,
            style: {
                stroke: 'rgba(220, 20, 60, 1)',
                lineWidth: 10
            },
            shape: polygon.shape
        });
        zr.add(polygon);
        zr.add(polygonOutline);
        zr.add(splineSmoothedPolyline);

        function update() {
            polygon.setShape({
                smooth: config.smooth
            });
            polygonOutline.setShape({
                smooth: config.smooth
            });
            polygonOutline.setStyle({
                strokePercent: config.percent
            });

            splineSmoothedPolyline.setStyle({
                strokePercent: config.percent
            });
        }

        const config = {
            smooth: 0.5,
            percent: 0,
            animatePercent: true
        };

        const gui = new dat.GUI();
        gui.add(config, 'smooth', 0, 1).onChange(update);
        gui.add(config, 'percent', 0, 1).onChange(update);
        gui.add(config, 'animatePercent');

        setInterval(function () {
            if (config.animatePercent) {
                config.percent = (config.percent + 0.01) % 1;
                gui.updateDisplay();
                update();
            }
        }, 20);

        update();
    </script>
</body>
</html>